<!-- 付款信息编辑弹窗 -->
<template>
  <ele-modal
    form
    :width="460"
    :model-value="modelValue"
    :title="isUpdate ? '编辑付款信息' : '新增付款信息'"
    @update:model-value="updateModelValue"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
      <el-form-item label="录单日期" prop="order_date">
        <el-date-picker
          v-model="form.order_date"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="请选择日期"
          class="w-full!"
        />
      </el-form-item>

      <el-form-item label="结算金额" prop="amount">
        <el-input
          v-model="form.amount"
          clearable
          placeholder="请填写结算金额"
          oninput="value=value.replace(/[^\d.]/g, '').replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/,'$1')"
        >
          <template #suffix>
            <el-text tag="b" type="danger">元</el-text>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item label="附件" prop="enclosure">
        <FileUpload v-model="form.enclosure" :limit="8" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="updateModelValue(false)">
        取消
      </el-button>
      <el-button
        type="primary"
        :loading="loading"
        @click="save"
      >
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script setup>
import FileUpload from '@/components/FileUpload/index.vue'

const props = defineProps({
  /** 弹窗是否打开 */
  modelValue: Boolean,
  /** 修改回显的数据 */
  data: Object,
  orderId: Number,
})

const emit = defineEmits(['done', 'update:modelValue'])

/** 是否是修改 */
const isUpdate = computed(() => !!form.id)

/** 提交状态 */
const loading = ref(false)

/** 表单实例 */
const formRef = ref(null)

/** 表单数据 */
const [form, resetFields, assignFields] = utils.useFormData({
  id: undefined,
  order_date: undefined,
  amount: '',
  enclosure: '',
})

/** 表单验证规则 */
const rules = reactive({
  order_date: {
    required: true,
    message: '请选择日期',
    trigger: 'change',
  },
  amount: {
    required: true,
    message: '请填写结算金额',
    type: 'string',
    trigger: 'blur',
  },
  enclosure: {
    required: false,
    message: '请上传附件',
    type: 'string',
    trigger: 'change',
  },
})

/** 保存编辑 */
function save() {
  formRef.value?.validate?.((valid) => {
    if (!valid)
      return

    loading.value = true

    utils.post('/sale/pay', {
      ...form,
      os_id: props.orderId,
      enclosure: utils.decodeFiles(form.enclosure),
    })
      .then((res) => {
        utils.message(res.msg, res.success)
        if (res.success) {
          updateModelValue(false)
          emit('done')
        }
      })
      .finally(() => {
        loading.value = false
      })
  })
}

/** 更新modelValue */
function updateModelValue(value) {
  emit('update:modelValue', value)
}

watch(
  () => props.modelValue,
  (modelValue) => {
    if (modelValue) {
      if (props.data) {
        assignFields({ ...form, ...props.data, enclosure: utils.encodeFiles(props.data.enclosure) })
      }
    }
    else {
      resetFields()
      formRef.value?.clearValidate?.()
    }
  },
)
</script>
